import React, { useEffect, useRef, useState } from 'react';
import EditorJS from '@editorjs/editorjs';
// @ts-ignore
import Header from '@editorjs/header';
// @ts-ignore
import List from '@editorjs/list';
// @ts-ignore
import Paragraph from '@editorjs/paragraph';
import { Card, Typography, Button } from 'antd';

const { Title, Paragraph: AntParagraph } = Typography;

const EditorJSPage: React.FC = () => {
  const editorRef = useRef<EditorJS | null>(null);
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    if (!editorRef.current) {
      const editor = new EditorJS({
        holder: 'editorjs-container',
        tools: {
          header: {
            class: Header,
            config: {
              placeholder: '输入标题...',
              levels: [1, 2, 3, 4, 5, 6],
              defaultLevel: 2
            }
          },
          list: {
            class: List,
            inlineToolbar: true,
            config: {
              defaultStyle: 'unordered'
            }
          },
          paragraph: {
            class: Paragraph,
            inlineToolbar: true,
            config: {
              placeholder: '输入内容...'
            }
          }
        },
        data: {
          blocks: [
            {
              type: 'header',
              data: {
                text: 'Editor.js 示例内容',
                level: 2
              }
            },
            {
              type: 'paragraph',
              data: {
                text: '这是 Editor.js 编辑器的初始内容。Editor.js 是一个块级编辑器，每个块都是独立的内容单元。'
              }
            },
            {
              type: 'list',
              data: {
                style: 'unordered',
                items: [
                  '支持多种块类型',
                  '现代化的编辑体验',
                  '可扩展的插件系统'
                ]
              }
            }
          ]
        },
        placeholder: '点击这里开始编辑...',
        onReady: () => {
          setIsReady(true);
        }
      });
      
      editorRef.current = editor;
    }

    return () => {
      if (editorRef.current && editorRef.current.destroy) {
        editorRef.current.destroy();
        editorRef.current = null;
      }
    };
  }, []);

  const handleGetContent = async () => {
    if (editorRef.current) {
      try {
        const outputData = await editorRef.current.save();
        console.log('Editor.js content:', outputData);
      } catch (error) {
        console.error('获取内容失败:', error);
      }
    }
  };

  return (
    <div style={{ padding: '24px' }}>
      <Card>
        <Title level={2}>Editor.js 富文本编辑器</Title>
        <AntParagraph>
          Editor.js 是一个块级编辑器，提供了现代化的编辑体验和可扩展的插件系统。
        </AntParagraph>
        
        <div style={{ marginTop: '20px' }}>
          <div 
            id="editorjs-container" 
            style={{ 
              border: '1px solid #d9d9d9', 
              borderRadius: '6px', 
              padding: '12px',
              minHeight: '400px'
            }}
          />
        </div>
        
        <div style={{ marginTop: '20px' }}>
          <Button onClick={handleGetContent} disabled={!isReady}>
            获取内容
          </Button>
        </div>
      </Card>
    </div>
  );
};

export default EditorJSPage;